<template>
<div class="PlotSearch">

    <el-dialog title="图斑信息" :append-to-body="true" :visible.sync="LandParcelInfoVisible" width="65%">
        <!-- <PlotMsg :type="true" :subjectData="subjectData" :key="LandParcelInfoVisible" :LandParcelInfo="LandParcelInfo"></PlotMsg> -->
        <AcquisitionInterface v-if="spotID" :isShow="false" :currentTask="currentTask" :spotID="spotID" :userInfo="userInfo">图斑信息采集界面</AcquisitionInterface>
    </el-dialog>

    <el-row>
        <el-col :span="24">
            <el-card>
                <el-form :inline="true" :model="searchData" class="demo-form-inline messageInput" label-width="90px" label-position="left">
                    <el-form-item label="图斑ID">
                        <el-input v-model="searchData.landCode" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="地塘块命名">
                        <el-input v-model="searchData.landName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="所属主体">
                        <el-input v-model="searchData.subjectName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="农产品">
                        <el-input v-model="searchData.landProduct" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="选择镇街">
                        <el-select placeholder="选择镇街" v-model="searchData.landTownCode" @change="selectOptionsChildren">
                            <el-option label="全部" :value="0">
                            </el-option>
                            <el-option v-for="(item) in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择村居">
                        <el-select placeholder="选择村居" v-model="searchData.landVillageCode">
                            <el-option label="全部" :value="0">
                            </el-option>
                            <el-option v-for="(item) in options2" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-button type="primary" @click="searchLand()">查询</el-button>
                </el-form>
            </el-card>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="24">
            <el-card class="el-card" shadow="never">
                <el-table :data="List" style="width: 100%">
                    <el-table-column prop="landCode" label="图斑ID">
                    </el-table-column>
                    <el-table-column prop="landName" label="地塘块命名">
                    </el-table-column>
                    <el-table-column prop="landTownName" label="镇街">
                    </el-table-column>
                    <el-table-column prop="landVillageName" label="村居">
                    </el-table-column>

                    <el-table-column prop="mu" label="面积(亩)">
                    </el-table-column>
                    <el-table-column prop="landTypeName" label="地块类型">
                    </el-table-column>

                    <!-- <el-table-column prop="coordinate" label="坐标"> </el-table-column> -->
                    <el-table-column prop="subjectNames" label="所属主体"> </el-table-column>
                    <el-table-column prop="levelTwoType" label="地类"> </el-table-column>
                    <el-table-column prop="landProductName" label="农产品">
                    </el-table-column>
                    <el-table-column prop="landOtherType" label="品种"></el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="bottom">
                    <el-pagination background @size-change="handleSizeChange" @current-change="currentchange" :current-page="paging.pageNum" :page-sizes="[5, 10, 20, 30, 40]" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total">
                    </el-pagination>
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>
</template>

<script>
import {
    mapState
} from 'vuex';
const cityOptions = [{
    label: "种植业",
    value: 'SS2'
}, {
    label: "渔业",
    value: 'SS1'
}];
export default {
    name: "PlotSearch",
    components: {
        PlotMsg: () => import("@/components/PlotMsg/PlotMsg.vue"),
    },
    data() {

        return {
            spotID:"",
            cities: cityOptions,
            checkedCities: ['SS1'],
            search: {
                planName: "",
                value: "",
            },
            searchData: {
                pageNumber: 1,
                pageSize: 5,
            },
            params: {
                pageNumber: 1,
                pageSize: 5,
            },
            paging: {},
            List: [],
            options: [],
            townIndex: null,
            LandParcelInfo: {
                landCode: null
            },
            LandParcelInfoVisible: false,
            subjectData: [],
        };
    },
    created() {

        if (localStorage.getItem('SYS_TYPE') === 'SS1') {
            this.checkedCities = ['SS1']
        } else {
            this.checkedCities = ['SS2']
        }

        this.ProductionInformationBase(this.params);
        this.selectData();
    },
    computed: {
        options2() {
            if (this.searchData.subjectTownId != 0 && typeof this.townIndex === 'number') {
                return this.options[this.townIndex].children
            } else {
                return []
            }
        },
        ...mapState({
            taskObject: (state) => {
                return state.taskmodel.taskObject;
            },
            currentTask: (state) => {
                return state.currentTask.Task;
            },
            userInfo: (state) => {
                return state.User.userInfo;
            },
        }),
    },

    methods: {
        selectOptionsChildren(opid) {
            if (opid !== 0) {
                this.options.forEach((item, index) => {
                    if (item.value === opid) {
                        this.townIndex = index
                    }
                })
            } else {
                this.townIndex = 0;
            }
            this.$set(this.searchData, 'landVillageCode', 0)
        },
        getLandNameAuto() {
            this.$axios
                .post("/rbac/data/LandInfoRule/getLandNameAuto", {
                    params: {
                        landId: this.LandParcelInfo.id,
                        town: this.LandParcelInfo.landTownName,
                        village: this.LandParcelInfo.landVillageName,
                        landType: this.LandParcelInfo.landType,
                    },
                })
                .then((res) => {
                    this.LandParcelInfo.landName = res.data;
                });
        },
        // handleClick(row) {
        //     console.log(row);
        //     this.LandParcelInfoVisible = true
        //     this.LandParcelInfo.landProductArea = row.mu
        //     this.LandParcelInfo = row;

        // },
        handleClick(row) {
            console.log(row)
            this.spotID = row.landCode
            // console.log(this.searchData);
            // this.subjectFormRow = row;
            // this.type = false;
            this.LandParcelInfoVisible = true;
        },
        selectData() {
            var json = JSON.parse(window.localStorage.getItem('getTreeData/setAsyncVillageData'));
            console.log(json[0].children[0].children);
            this.options = json[0].children[0].children;

        },
        statusChange(item) {
            console.log(item);
        },
        onSearch() {},
        handleSizeChange(pageSize) {
            this.params.pageSize = pageSize;
            this.ProductionInformationBase(this.params);
        },
        currentchange(pageNumber) {
            this.params.pageNumber = pageNumber;
            this.ProductionInformationBase(this.params);
        },
        ProductionInformationBase() {
            this.$set(this.params, 'systemTypes', this.checkedCities.join(','))

            this.LandParcelInfoVisible = false
            this.$fishing
                .ProductionInformationBase(this.params)
                .then((res) => {
                    this.List = []
                    res.data.list.forEach((item, index) => {
                        item.landProductArea = item.mu
                        this.List.push(item)
                    })
                    delete res.data.list;
                    this.paging = res.data;
                });
        },
        searchLand() {

            if (Object.keys(this.searchData).length === 2) {
                this.$message({
                    message: '请至少输入一个查询条件',
                    type: 'warning'
                });
                return false
            }

            if (this.searchData.landTownCode === 0) {
                delete this.searchData.landTownCode
            }
            if (this.searchData.landVillageCode === 0) {
                delete this.searchData.landVillageCode
            }

            this.$axios.get("rbac/data/LandInfo/getList", {
                params: {
                    "landInfo.landCode": this.searchData.landCode,
                    "landInfo.landName": this.searchData.landName,
                    "landInfo.landTownCode": this.searchData.landTownCode,
                    "landInfo.landVillageCode": this.searchData.landVillageCode,
                    "landSubject.lsSubjectCode": this.searchData.lsSubjectCode,
                    "landInfo.landProduct": this.searchData.landProduct,
                    "subjectName": this.searchData.subjectName,
                    // "systemTypes": this.checkedCities.join(','),
                }
            }).then(res => {
                this.List = res.data.list;
                this.paging = res.data;
            });
        }
    },
};
</script>

<style lang="scss">
.PlotSearch {
    .form {
        padding: 15px 10px;
    }

    .el-card {
        width: 98%;
        margin: 15px auto 0;

        .bottom {
            display: flex;
            justify-content: flex-end;
            margin-top: 15px;
        }
    }
}
</style>
